<template>
  <div class="demo">
    <div class="btn" @click="goPage">打开百度页面</div>
    <div class="btn" @click="startCamera">打开相机</div>
    <div class="btn" @click="startAlbum">打开相册</div>
    <div class="btn"> <img id="img_id" class="img" :src="img" alt="" /></div>
    <div class="btn" @click="setSharedPreferences('key', 'qweqwe')">写入配置</div>
    <div class="btn" @click="getSharedPreferences('key')">获取配置</div>
    <div class="btn" @click="finish">关闭自身</div>
    <div class="btn"><textarea v-model="msg"></textarea></div>
    <div class="btn"><textarea v-model="msg2"></textarea></div>
    <div class="btn"><textarea v-model="msg3"></textarea></div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Component } from 'vue-property-decorator'

  @Component({
    beforeRouteEnter(to, from, next) {
      $setStore('waiting', false)
      next()
    },
  })
  export default class DemoComponent extends Vue {
    img = ''
    msg = ''
    msg2 = ''
    msg3 = ''
    //打开新页面，参数传递页面全路径地址
    goPage() {
      android.newPage('https://www.cnblogs.com/yidan621/p/5660895.html')
    }
    //调用android的方法打开摄像头
    startCamera() {
      android.startCamera()
    }
    //调用android的方法打开相册
    startAlbum() {
      android.startAlbum()
    }
    //调用android的方法写入本地配置，采用key-value键值对
    setSharedPreferences(key, value) {
      android.setConfig(key, value)
    }
    //调用android的方法读取本地配置，采用key-value键值对
    getSharedPreferences(key) {
      this.msg = android.getConfig(key)
    }
    //调用相机或者相册的统一接收方法，参数为图片的base64编码，需要自己加data:image/jpeg;base64,以及设定给img标签
    receiveCamera(img) {
      this.img = 'data:image/jpeg;base64,' + img
      // document.getElementById('img_id').src = 'data:image/jpeg;base64,' + img
    }
    showErr(msg) {
      this.msg = msg
    }
    finish() {
      android.finish()
    }
    mounted() {
      window.showErr = this.showErr
      window.receiveCamera = this.receiveCamera
    }
  }
</script>
<style lang="less" scoped>
  .demo {
    width: 100%;
    padding: 10px 20px;
    overflow: auto;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      margin: 20px 0;
      font-size: 20px;
      cursor: pointer;
      border: 1px solid orange;

      textarea {
        width: 100%;
        height: 200px;
        resize: none;
        border: none;
        outline: none;
      }
    }

    .img {
      width: 200px;
      height: 200px;
    }
  }
</style>
